import React, { Component } from 'react';
import { Dispatch, AnyAction } from 'redux';
import { connect } from 'dva';
import { Avatar, List, Tag } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';

import Audio from '@/components/Audio';
import { PersonalRadioItem } from '@/domains/radio';
import { Loading } from '@/models/connect';
import { StateType } from './model';

interface State {
  internetRadio: StateType;
  loading: Loading;
}

interface InternetRadioProps {
  dispatch: Dispatch<AnyAction>;
  internetRadio: StateType;
  loading: boolean;
}

interface InternetRadioState {
  currentPage: number;
}

const listStyles = {
  height: 'calc(100vh - 246px)',
  marginTop: '16px',
  backgroundColor: 'white',
  overflow: 'auto',
};

const tabList: any = [];

@connect(({ internetRadio, loading }: State) => ({
  internetRadio,
  loading: loading.models.internetRadio,
}))
class InternetRadio extends Component<InternetRadioProps, InternetRadioState> {
  state = {
    currentPage: 1,
  };

  componentDidMount() {
    const {
      internetRadio: { tabKey },
    } = this.props;
    this.fetchRadioList(tabKey);
  }

  fetchRadioList = (tabKey: string) => {
    const { dispatch } = this.props;
    dispatch({ type: 'internetRadio/fetchRadioList', payload: tabKey });
    this.setState({ currentPage: 1 });
  };

  onItemPlay = (item: PersonalRadioItem) => {
    const { dispatch } = this.props;
    dispatch({ type: 'internetRadio/saveData', payload: { selected: item } });
  };

  changeSelected = (dir: string) => {
    const { dispatch } = this.props;
    dispatch({ type: 'internetRadio/changeSelected', payload: dir });
  };

  renderListItem = (item: PersonalRadioItem) => {
    const {
      internetRadio: { selected },
    } = this.props;
    return (
      <List.Item
        key={item.id}
        style={selected && selected.id === item.id ? { background: '#e6f7ff' } : undefined}
        onClick={() => this.onItemPlay(item)}
        actions={selected && selected.id === item.id ? [<Tag color="magenta">LIVE</Tag>] : []}
      >
        <List.Item.Meta
          avatar={<Avatar style={{ width: '48px', height: '48px' }} src={item.banner} />}
          title={item.title}
          description={item.description}
        />
      </List.Item>
    );
  };

  render() {
    const {
      internetRadio: { radioList, selected, tabKey },
      loading,
    } = this.props;
    const { currentPage } = this.state;
    return (
      <PageHeaderWrapper
        title={false}
        tabList={tabList}
        tabActiveKey={tabKey}
        onTabChange={this.fetchRadioList}
      >
        <List
          size="small"
          itemLayout="horizontal"
          bordered
          pagination={{
            size: 'small',
            hideOnSinglePage: true,
            pageSize: 50,
            current: currentPage,
            total: radioList.length,
            onChange: page => this.setState({ currentPage: page }),
          }}
          style={listStyles}
          loading={loading}
          dataSource={radioList}
          renderItem={this.renderListItem}
        />
        <Audio
          data={selected}
          onPrev={() => this.changeSelected('prev')}
          onNext={() => this.changeSelected('next')}
        />
      </PageHeaderWrapper>
    );
  }
}

export default InternetRadio;
